<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tell A Story Management</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/assets/css/amazeui.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/assets/css/core.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/assets/css/menu.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/assets/css/index.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/assets/css/admin.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/assets/css/page/typography.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/assets/css/page/form.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/assets/css/component.css" />
    <link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath}/res/css/bootstrap.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/assets/js/jquery-2.1.0.js" ></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/assets/js/amazeui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/assets/js/app.js" ></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/assets/js/blockUI.js" ></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/assets/js/charts/echarts.min.js" ></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/assets/js/charts/indexChart.js" ></script>
    <script src="${pageContext.request.contextPath}/res/js/jquery-1.11.2.min.js"></script>
    <script src="${pageContext.request.contextPath}/res/js/bootstrap.js"></script>
    <script>
        var onPageNum;
        $(function(){
            onPageNum  =  1;
        });

        function deleteArticle(articleID) {

            $('#myModal').modal();
            $("#articleID").val(articleID);
        }



        function page(goPage) {
            if(goPage=="next"){
                onPageNum = onPageNum+1;
            }
            else if(goPage=="prev"){
                if(onPageNum<=1) return ;
                else onPageNum = onPageNum-1;
            }
            var params = {
                pageNum : onPageNum
            };
            $.ajax({
                type: "POST",
                url: "/Management/goPage",
                data: params,
                dataType:"html", //ajax返回值设置为text（json格式也可用它返回，可打印出结果，也可设置成json）
                success: function(data){
                    var blogArticleDTOList = $(data).find("#blogArticleDTOList");
                    if(blogArticleDTOList.html()!=null){
                        $("#blogArticles").empty();
                        $("#blogArticles").append(blogArticleDTOList).html();
                    }
                    else{
                        onPageNum=onPageNum-1;
                    }
                },
                error: function(data){
                    alert("服务器错误");
                    return false;
                }
            });
        }// end function page




    </script>
</head>
<body>
<header class="am-topbar am-topbar-fixed-top">
    <div class="am-topbar-left am-hide-sm-only">
        <p class="logo"><span>Tell A Story Management</span><i class="zmdi zmdi-layers"></i></p>
    </div>
    <div class="contain">
        <ul class="am-nav am-navbar-nav am-navbar-left">
            <li><h4 class="page-title">文章列表</h4></li>
        </ul>
    </div>
</header>
<div class="admin">
    <div class="admin-sidebar am-offcanvas  " >
        <div class="am-offcanvas-bar admin-offcanvas-bar">
            <!-- User -->
            <div class="user-box am-hide-sm-only">
                <div class="user-img">
                    <img src="${pageContext.request.contextPath}/res/img/managementimg/LOGO1.png" alt="user-img" title="Mat Helme" class="img-circle img-thumbnail img-responsive">
                    <div class="user-status offline"><i class="am-icon-dot-circle-o" aria-hidden="true"></i></div>
                </div>
                <h5>JEDI</h5>
                <ul class="list-inline">
                    <li>
                        <a href="#">
                            <i class="fa fa-cog" aria-hidden="true"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-custom">
                            <i class="fa fa-cog" aria-hidden="true"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 左侧功能菜单 -->
            <ul class="am-list admin-sidebar-list">
                <li><a href="/Management/users"><span class="am-icon-users"></span> 用户</a></li>
                <li><a href="/Management/article"><span class="am-icon-file"></span> 文章</a></li>
                <li><a href="/Management/comment"><span class="am-icon-comments"></span> 评论</a></li>
            </ul>
        </div>
    </div>
    <!--右侧页面-->
    <div class="content-page">
        <div class="content">
            <div class="card-box">
                <div class="am-g">
                    <div class="am-u-sm-12 am-u-md-6">
                        <!--<div class="am-btn-toolbar">
                          <div class="am-btn-group am-btn-group-xs">
                            <button type="button" class="am-btn am-btn-default"><span class="am-icon-plus"></span> 新增</button>
                            <button type="button" class="am-btn am-btn-default"><span class="am-icon-save"></span> 保存</button>
                            <button type="button" class="am-btn am-btn-default"><span class="am-icon-archive"></span> 审核</button>
                            <button type="button" class="am-btn am-btn-default"><span class="am-icon-trash-o"></span> 删除</button>
                          </div>
                        </div>-->
                    </div>
                    <div class="am-u-sm-12 am-u-md-3">
                        <div class="am-input-group am-input-group-sm">
                            <%--<input type="text" class="am-form-field">--%>
                            <%--<span class="am-input-group-btn">--%>
                            <%--<button class="am-btn am-btn-default" type="button">搜索</button>--%>
                            <%--</span>--%>
                        </div>
                    </div>
                </div>
                <div class="am-g">
                    <div class="am-u-sm-12">
                        <form class="am-form">
                            <table class="am-table am-table-striped am-table-hover table-main">
                                <thead>
                                <tr>
                                    <th class="table-title">标题</th><th class="table-type">作者</th><th class="table-author am-hide-sm-only">创建时间</th><th class="table-date am-hide-sm-only">浏览数</th><th class="table-set">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <div id="blogArticles">
                                    <c:forEach var="blogArticle" items="${blogArticleDTOList}" varStatus="vs">
                                        <div  id="blogArticleDTOList">
                                            <tr>
                                                <td>${blogArticle.articleName}</td>
                                                <td>${blogArticle.userName}</td>
                                                <td>${blogArticle.genTime}</td>
                                                <td class="am-hide-sm-only">${blogArticle.readNum}</td>
                                                <td>
                                                    <div class="am-btn-toolbar">
                                                        <div class="am-btn-group am-btn-group-xs">
                                                            <a href="/home/loadBlogArticle?articleID=${blogArticle.articleID}" class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 详情</a>
                                                            <a href="" onclick="deleteArticle('${blogArticle.articleID}');return false" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </div>
                                    </c:forEach>
                                </div>
                                </tbody>
                            </table>
                            <div class="am-cf">
                                <div class="am-fr">
                                    <ul class="am-pagination">
                                        <li><a href="" onclick="page('prev');return false" >上一页</a></li>
                                        <li><a href=""  onclick="page('next');return false">下一页</a></li>
                                    </ul>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">操作提示</h4>
            </div>
            <div id="optionInfo" class="modal-body">确定要删除该文章吗？</div>
            <div id="buttons" class="modal-footer">
                <form action="/Management/deleteArticle" method="post">
                    <input id="articleID" name="articleID" type="hidden" />
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">确定</button>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>




</body>







</html>
